<div class="ui grid">
    <div class="ui row">
      <div class="six wide column">
          <h3>{{ 'project_applications_list' | translate }}</h3>
      </div>
      <div class="four wide column centered">
        <a class="ui blue button" [routerLink]="['./application']" [class.disabled]="project.permission < 7">{{ 'application_create' | translate }}</a>
      </div>
      <div class="right aligned six wide column">
          <app-input-autofocus [(model)]="filter"></app-input-autofocus>
      </div>
    </div>

    <div class="ui row">
      <div class="ui sixteen wide column">
        <div *ngIf="project.application_names && project.application_names.length > 0;then applications;else noapplications"></div>
          <ng-template #applications>
            <div class="ui stackable four cards">
                <a [routerLink]="['./application', app.name]" class="ui link card" *ngFor="let app of filteredApplications">
                    <div class="content">
                        <img *ngIf="app.icon" class="right floated mini ui image" [src]="app.icon">
                        <div class="header">
                          <span [innerText]="app.name"></span>
                          <app-warning-mark-list [warnings]="warnMap?.get(app.name)"></app-warning-mark-list>
                        </div>
                        <div class="meta" *ngIf="app.description">
                            <span [innerText]="app.description.slice(0, 90)"></span><span *ngIf="app.description.length > 90">...</span>
                        </div>
                        <div class="meta" *ngIf="!app.description" [innerText]="'common_no_description' | translate"></div>
                    </div>
                </a>
            </div>
          </ng-template>
          <ng-template #noapplications>
            <div class="ui segment">
              <span>{{ 'project_no_application' | translate }}</span>
            </div>
          </ng-template>
      </div>
    </div>
</div>
